<!DOCTYPE html>
<html lang="zh-CN">

<head>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>火锅 首页</title>
	<link rel="stylesheet" href="css/nav.css" type="text/css">
	<meta charset="utf-8" />
	<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
	<!-- nav样式是包含了所有页面的上下端的=common文件 -->
	<link rel="stylesheet" href="css/index.css" type="text/css">
	<!-- 使用了Bootstrap前端开发框架 -->
	<base target="_blank" /> <!-- 在新窗口打开链接,（默认为）_self	在同一个框架中打开链接。 -->
</head>

<body>
	<!-- header跟着页面走（在视线中相对固定 -->
	<header>
		<div class="menu-bar">
			<nav>
				<ul>
					<li class="active"><a href="index.html"> <i class="fa fa-home"></i>首页</a>

					<li><a href="#"><i class="fa fa-music"></i>火锅组成</a>
						<div class="sub-menu-1">
							<ul>
								<li><a href="fivetonedetial.html">食材</a></li>
								<li><a href="fivetoneorigin.html">蘸料</a></li>
								<li><a href="fivetone.html">锅底锅汤</a></li>
							</ul>
						</div>
					</li>

					<li><a href="#"><i class="fa fa-headphones" aria-hidden="true"></i>世界火锅</a>
						<div class="sub-menu-1">
							<ul>
								<li><a href="PIdetial.html">瑞士</a></li>
								<li><a href="PIorigin.html">印度</a></li>
								<li><a href="Math.html">意大利</a></li>
							</ul>
						</div>
					</li>

					<li><a href="#"><i class="fa fa-book"></i>店铺推荐</a>
						<div class="sub-menu-1">
							<ul>
								<li><a href="seventone.html">成都主界面，搞大众点评的交互</a></li>
								<li><a href="Instruments.html">其他地方有名有特色的</a></li>
							</ul>
						</div>
					</li>

					<li><a href="#"><i class="fa fa-info-circle"></i>感谢</a>
						<div class="sub-menu-1">
							<ul>
								<li><a href="thanks.html">鸣谢</a></li>
								<li><a href="questionnaire.html">反馈与建议</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</nav>
		</div>
	</header>

	<div class="main">
		<!-- wrap模块包裹轮播图片 -->
		<div id="level1" class="container">
			<div id="carouselExampleCaptions" class="carousel slide">
				<div class="carousel-indicators">
					<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
						aria-current="true" aria-label="Slide 1"></button>
					<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
						aria-label="Slide 2"></button>
					<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
						aria-label="Slide 3"></button>
					<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"
						aria-label="Slide 4"></button>
					<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4"
						aria-label="Slide 5"></button>
				</div>
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="img/lunbo1.png" class="d-block w-100" alt="...">
					</div>
					<div class="carousel-item">
						<img src="img/lunbo2.png" class="d-block w-100" alt="...">
					</div>
					<div class="carousel-item">
						<img src="img/lunbo5.png" class="d-block w-100" alt="...">
					</div>
					<div class="carousel-item">
						<img src="img/lunbo3.png" class="d-block w-100" alt="...">
					</div>
					<div class="carousel-item">
						<img src="img/lunbo4.png" class="d-block w-100" alt="...">
					</div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
					data-bs-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="visually-hidden">P</span>
				</button>
				<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
					data-bs-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="visually-hidden">N</span>
				</button>

			</div>
			<div class="news">
				<p style="font-family: '隶书';">
					火锅，古称“古董羹”。因食物投入沸水时发出的“咕咚”声而得名，是中国独创的美食之一，也是一种老少皆宜的食物。火锅不仅是一种烹饪方式，也是一种文化的象征。
				</p>
			</div>
			<div style="clear: both"></div>
		</div>
		<div class="squ">
			<div class="box">
				<img src="" />
				<div class="ceng">
					<h2>今天吃什么</h2>
					<p></p>
					<a href="fivetonedetial.html">了解更多&nbsp;></a>
				</div>
			</div>
			<div class="box">
				<img src="" />
				<div class="ceng">
					<h2>蘸料推荐</h2>
					<p></p>
					<a href="Math.html">了解更多&nbsp;></a>
				</div>
			</div>
			<div class="box">
				<img src="" />
				<div class="ceng">
					<h2>世界火锅</h2>
					<p></p>
					<a href="seventone.html">了解更多&nbsp;></a>
				</div>
			</div>
			<div class="box">
				<img src="" />
				<div class="ceng">
					<h2>大众点评</h2>
					<p></p>
					<a href="multi.html">了解更多&nbsp;></a>
				</div>
			</div>
		</div>
		<div class="yq">
			<img src="img/R.jpg" />
			<div class="btn">
				<img src="img/10huoguo.jpg" width="350px" /><br />
				<a href="Instruments.html">立即前往&nbsp;></a>
			</div>
		</div>

	</div>

	<div class="footer-main-div">
		<div class="footer-social-icons">
		</div>
		<div class="footer-menu-one">
			<ul>
				<li> <a href="thanks.html">特别鸣谢</a></li>
				<li> <a href="questionnaire.html">反馈与建议</a></li>
			</ul>
		</div>

		<div class="footer-bottom">
			<p>
				<script>document.write(new Date().getFullYear())</script>&nbsp 我刷刷刷队
			</p>
		</div>
	</div>
	<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>